<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- Latest Bootstrap min CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css">
    <!-- Dropdownhover CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap-dropdownhover.min.css" type="text/css">
    <!-- latest fonts awesome -->
    <link rel="stylesheet" href="assets/font/css/font-awesome.min.css" type="text/css">
    <!-- simple line fonts awesome -->
    <link rel="stylesheet" href="assets/simple-line-icon/css/simple-line-icons.css" type="text/css">
    <!-- stroke-gap-icons -->
    <link rel="stylesheet" href="assets/stroke-gap-icons/stroke-gap-icons.css" type="text/css">
    <!-- Animate CSS -->
    <link rel="stylesheet" href="assets/css/animate.min.css" type="text/css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css" type="text/css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="assets/css/slider.css" type="text/css">
    <!--  baguetteBox -->
    <link rel="stylesheet" href="assets/css/baguetteBox.css">
    <!-- Owl Carousel Assets -->
    <link href="assets/owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="assets/owl-carousel/owl.theme.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
</head>
<body>
<!--  Preloader  -->
<!--<div id="preloader">
    <div id="loading"> </div>
</div>-->
<header class="header2" id="vuevm">
    <!--  top-header  -->
    <div class="top-header">
        <div class="container">
            <div class="col-md-6">
                <div class="top-header-left">
                    <ul>
                        <li>
                            <div class="dropdown">
                                <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                   data-hover="dropdown"> <img src="assets/images/eng-flg.jpg" alt="eng-flg"/> 兰州集团<i
                                        class="fa fa-angle-down" aria-hidden="true"></i> </a>
                            </div>
                        </li>
                        <li>
                            <div class="dropdown"><a href="#" class="btn btn-default dropdown-toggle"
                                                     data-toggle="dropdown" data-hover="dropdown">
                                LZ-Sexy-Shop <i class="fa fa-angle-down" aria-hidden="true"></i>
                            </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">主营:成人用品</a></li>
                                    <li><a href="#">关于我们</a></li>
                                    <li><a href="#">加入我们</a></li>
                                </ul>
                            </div>
                        </li>
                        <a type="button" onclick="checklogin()" class="btn btn-primary">登陆</a>
                        <a href="registration.html" type="button"  class="btn btn-primary">注册</a>
                        <a type="button" onclick="loginout()" class="btn btn-primary">退出登录</a>
                    </ul>
                </div>
            </div>
            <div class="col-md-6">
                <div class="top-header-right">
                    <ul>
                        <li> {{userName}}</li>
                        <li>{{logintime}}</li>
                        <li>{{showcount}}</li>
                        <li><i class="icon-note icons" aria-hidden="true"></i> 您的建议</li>
                        <li>
                            <div class="dropdown">
                                <a href="../view_admin/user.html" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                   data-hover="dropdown"> <i class="icon-settings icons" aria-hidden="true"></i> 个人中心
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="../view_admin/user.html">个人中心</a></li>
                                    <li><a href="../view_admin/order.html">我的订单</a></li>
                                    <li><a href="../view_admin/personalserials.html">我的流水</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--  /top-header  -->
    </div>
    <section class="top-md-menu">
        <div class="container">
            <div class="col-sm-3">
                <div class="logo">
                    <h6><img src="assets/images/logo.png" alt="logo"/></h6>
                </div>
            </div>
            <div class="col-md-7">
                <!-- Search box Start -->
                <div style="padding-left: 0px">
                    <b style="float: left">商品属性</b>
                    <input id="search" type="text" class="form-control"  placeholder="请输入关键字，不同关键字用/分割">
                    <div style="float: left">
                        <button @click="search" type="submit" class="btn btn-default">搜索</button>
                    </div>
                </div>
                <!-- Search box End -->
            </div>
            <div class="col-sm-2">
                <!-- cart-menu -->
                <div class="cart-menu">
                    <ul>
                        <li><a href="#"><i class="icon-heart icons" aria-hidden="true"></i></a><span
                                class="subno">1</span><strong>您的收藏</strong></li>
                        <li class="dropdown"><a href="#" data-toggle="dropdown" data-hover="dropdown"
                                                @click="shopCartShow"><i
                                class="icon-basket-loaded icons" aria-hidden="true"></i></a><span class="subno">{{shopCartCount}}</span><strong>
                            您的购物车</strong>
                            <div class="dropdown-menu  cart-outer">
                                <div v-if="shopCartList===0">
                                    您的购物车空空如也~~快去购物吧！
                                </div>
                                <div v-else>
                                    <div v-for="(shopCart,index) in shopCartList.slice(0,2)">
                                        <div class="cart-content">
                                            <div class="col-sm-4 col-md-4"><img :src="shopCart.goods.headUrl" alt="13">
                                            </div>
                                            <div class="col-sm-8 col-md-8">
                                                <div class="pro-text"><a href="#">{{shopCart.goods.name}} </a>
                                                    <button class="close" @click="deleteGoods(shopCart.goodsId)">x</button>
                                                    <strong>{{shopCart.goodsNum}} ×
                                                        ${{shopCart.goods.originalPrice}}.00</strong></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!--<div class="cart-content">
                                    <div class="col-sm-4 col-md-4"><img src="assets/images/elec-img3.jpg" alt="13">
                                    </div>
                                    <div class="col-sm-8 col-md-8">
                                        <div class="pro-text"><a href="#">Apple Macbook Retina 23’’ </a>
                                            <div class="close">x</div>
                                            <strong>1 × $290.00</strong></div>
                                    </div>
                                </div>-->
                                <!--<div class="total">
                                    <div class="col-md-6 text-left"><span>Shipping :</span> <strong>Total :</strong>
                                    </div>
                                    <div class="col-md-6 text-right"><strong>$0.00</strong> <strong>$160.00</strong>
                                    </div>
                                </div>-->
                                <a href="shopping-cart.html" class="cart-btn">查看购物车 </a>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- cart-menu End -->
            </div>
            <div class="main-menu">
                <!--  nav  -->
                <nav class="navbar navbar-inverse navbar-default">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-1"><span
                                class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span
                                class="icon-bar"></span> <span class="icon-bar"></span></button>
                    </div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" data-hover="dropdown"
                         data-animations=" fadeInLeft fadeInUp fadeInRight">
                        <ul class="nav navbar-nav">
                            <li class="all-departments dropdown">
                                <a href="index.html" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-expanded="false"><span> 商品分类</span>
                                    <i class="fa fa-bars" aria-hidden="true"></i> </a>
                                <ul class="dropdown-menu dropdownhover-bottom" role="menu">
                                    <!--<li class="dropdown">
                                        <a href="#"><img src="assets/images/menu-icon4.png" alt="menu-icon4"/>
                                            避孕套 <i class="fa fa-angle-right" aria-hidden="true"
                                                   style="margin-top: 2px"></i></a>
                                        <div class="dropdown-menu dropdownhover-bottom mega-menu" role="menu">
                                            <div class="col-sm-8 col-md-8">
                                                <ul>
                                                    <li><strong>品牌</strong></li>
                                                    <li><a href="#">Flip-Flops</a></li>
                                                    <li><a href="#">Fashion Scarves</a></li>
                                                    <li><a href="#">Wallets</a></li>
                                                    <li><a href="#">Evening Handbags</a></li>
                                                    <li><a href="#">Wrist Watches</a></li>
                                                </ul>
                                                <ul>
                                                    <li><strong>外观</strong></li>
                                                    <li><a href="#">Flip-Flops</a></li>
                                                    <li><a href="#">Fashion Scarves</a></li>
                                                    <li><a href="#">Wallets</a></li>
                                                    <li><a href="#">Evening Handbags</a></li>
                                                    <li><a href="#">Wrist Watches</a></li>
                                                </ul>
                                                <ul>
                                                    <li><strong>功能</strong></li>
                                                    <li><a href="#">Flip-Flops</a></li>
                                                    <li><a href="#">Fashion Scarves</a></li>
                                                    <li><a href="#">Wallets</a></li>
                                                    <li><a href="#">Evening Handbags</a></li>
                                                    <li><a href="#">Wrist Watches</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </li>-->
                                    <li v-for="item in category" class="dropdown">
                                        <a href="index.html"><img src="assets/images/menu-icon1.png"/>
                                            {{item.name}} <i class="fa fa-angle-right " aria-hidden="true"
                                                             style="margin-top: 2px"></i></a>
                                        <!--<ul class="dropdown-menu right">
                                            <li><a href="grid.html">Electronic 01</a></li>
                                            <li><a href="list.html">Electronic 02</a></li>
                                        </ul>-->
                                    </li>
                                    <!--<li>
                                        <a href="#"><img src="assets/images/menu-icon11.png" alt="menu-icon2"/>All
                                            Categories</a>
                                    </li>-->
                                </ul>
                            </li>
                            <li><a href="index.html">首页</a></li>
                            <li><a href="list.html">商品列表</a></li>
                            <li><a href="gridzenith.html">折扣商品</a></li>
                            <li><a href="feedback.html">反馈</a></li>
                            <li><a href="shopping-cart.html">购物车</a></li>
                            <li><a href="checkout.html">结算</a></li>
                        </ul>
                        <!-- /.navbar-collapse -->
                    </div>
                </nav>
                <!-- /nav end -->
            </div>
        </div>
    </section>
</header>
<script src="assets/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-dropdownhover.min.js"></script>
<!-- Plugin JavaScript -->
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<!-- owl carousel -->
<script src="assets/owl-carousel/owl.carousel.js"></script>
<!--  Custom Theme JavaScript  -->
<script src="assets/js/filter-price.js"></script>
<script src="assets/js/custom.js"></script>
<!--====== Vue js ======-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--====== http util js ======-->
<script src="assets/js/util/http-util.js"></script>
</body>
</html>
<script>
    var headVm = new Vue({
        el: '#vuevm',
        data: {
            category: [],
            shopCartList: [],
            Goods:[],
            userName:"",
            logintime:"",
            showcount:"",
            shopCartCount:"",
        },
        methods: {
            getCategory: function () {
                let url = "/getAll";
                let thisObj = this;
                doGet(url, function (resp) {
                    console.log(url);
                    thisObj.category = resp;
                    console.log(thisObj.category);
                })
            },
            shopCartShow: function () {
                let url = "shopCartShow";
                let thisObj = this;
                doGet(url, function (resp) {
                    thisObj.shopCartList = resp;
                    thisObj.shopCartCount=thisObj.shopCartList.length;
                    console.log(thisObj.shopCartCount);
                    console.log(thisObj.shopCartList);
                })
            },
            deleteGoods: function (goodsId) {
                let url = "delete";
                let thisObj = this;
                let params = {updateIds: goodsId};
                doPost(url, params, function (resp) {
                    location.href = "http://localhost:8080/view_api/shopping-cart.html";
                    console.log(resp)
                })
            },
            search: function () {
                let thisObj = this;
                let url = "searchGoods";
                let searchKey = $('#search').val();
                location.href="http://localhost:8080/view_api/listSearch.html?GoodsList="+searchKey;
            },
            showname: function () {
                let url = "/showname";
                let thisObj=this;
                doGet(url, function (resp) {
                    thisObj.userName=resp;

                });
            },
            //显示时间
            showtime: function () {
                let url = "/showtime";
                let thisObj=this;
                doGet(url, function (resp) {
                    thisObj.logintime=resp;

                });
            },
            //显示人数
            show:function (){
                let url = "/listen";
                let thisObj = this;
                doGet(url, function (resp) {
                    thisObj.showcount = resp;
                });
            },
        },
        mounted: function () {
            this.showname();
            this.getCategory();
            this.show();
            this.showtime();
            this.shopCartShow();
        }
    });

    /*退出登录*/
    function loginout() {
        let url = "/loginpassout";
        doGet(url, function () {
            location.href = "index.html";
            alert("退出登录成功");
        });

    }

    //判断用户有没有登录
    function checklogin() {
        let url = "/checkuser";
        doGet(url, function () {
            location.href = "loginpass.html";
        });

    }

</script>